@import "compass";
@import "mixins.scss";

.serviceContainer {
  height: 100%;
  .layui-tab {
    margin: 0;
  }
  .layui-tab-content {
    overflow: auto;
  }
  .listTitle {
    height: 36px;
    line-height: 36px;
  }
  .serviceList {
    width: 180px;
    height: 100%;
    border-right: 1px solid #ccc;
    background: #e3e3e3;
    .serviceTitle {
      font-size: 16px;
      @include padding2(0, 6px);
    }
    .serviceNumer {
      font-size: 12px;
      color: #999;
      margin-bottom: 8px;
      @include padding2(0, 6px);
    }
    .addAccountBox {
      text-align: center;
      margin: 16px 0;
    }
    .addAccount {
      width: 72px;
    }
  }
  .messageList {
    width: 180px;
    height: 100%;
    border-right: 1px solid #ccc;
    background: #e6e6e6;
    position: relative;
    @include user-select(none);
    .alwaysTopMessage {
      background: #f1f1f1;
    }
    .chatTitle {
      font-size: 14px;
      @include padding2(0, 6px);
      @include justify-content(space-between);
      @include align-items(center);
      .layui-form-item {
        margin-bottom: 0;
      }
      .layui-form input {
        background: transparent;
        border: none;
        outline: none;
        width: 115px;
        padding-left: 0;
      }
    }
    .chatOperate {
      @include align-items(center);
      @include padding2(0, 6px);
      height: 20px;
    }
    .chatSearch {
      width: 100px;
      height: 20px;
      line-height: 20px;
      margin-right: 4px;
      font-size: 12px;
    }
    .toggleList {
      position: absolute;
      bottom: 2px;
      font-size: 26px;
      color: #33ab9f;
      z-index: 1;
    }
    .showList {
      left: -30px;
      transform: rotate(180deg);
    }
    .dragLine {
      width: 1px;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      background: #bbb;
      cursor: col-resize;
    }
  }
  .chatContainer {
    flex-grow: 1;
    background: #f1f1f1;
    border-right: 1px solid #ccc;
    height: 100%;
    .messageTitle {
      @include justify-content(space-between);
      @include align-items(center);
      @include padding2(0, 12px);
      @include flex-shrink(0);
      font-size: 14px;
      border-bottom: 1px solid #ccc;
      .setVip {
        margin-left: 6px;
      }
      .setVip,.shieldMessage {
        color: #01AAED;
        font-size: 12px;
      }
    }
    .messageTools {
      height: 38px;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
      position: relative;
      @include padding-right(12px);
      @include align-items(center);
      .tools {
        @include padding2(10px, 12px);
        @include flex-grow(1);
        @include user-select(none);
        .toolsIcon {
          cursor: pointer;
          display: inline-block;
          width: 20px;
          height: 20px;
          background-size: cover;
          margin-right: 12px;
        }
        .sendEmoji {
          background-image: image-url('emoji.png');
        }
        .sendFile {
          background-image: image-url('file.png');
          position: relative;
          input {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
          }
        }
        .findHistory {
          background-image: image-url('history.png');
        }
      }
      .emojiContainer {
        position: absolute;
        bottom: 36px;
        left: 0;
        width: 100%;
        height: 190px;
        border: 1px solid #ccc;
        background: #fff;
        overflow: auto;
        @include padding2(12px, 16px);
        @include flex-wrap(wrap);
        .face {
          cursor: pointer;
          float: left;
          border: 1px solid #e8e8e8;
          height: 22px;
          width: 26px;
          overflow: hidden;
          margin: -1px 0 0 -1px;
          padding: 4px 2px;
          text-align: center;
        }
        img {
          width: 22px;
          height: 22px;
        }
      }
    }
    .textContainer {
      height: 160px;
      position: relative;
      background: #fff;
      @include align-items(flex-end);
      .textBox {
        resize: none;
        width: 100%;
        border: none;
        font-size: 12px;
        outline: none;
        font-size: 14px;
        line-height: 22px;
        @include padding2(6px, 6px);
      }
      .sendMessage {
        margin: 4px 8px 12px 0;
        width: 54px;
      }
      .emoji {
        width: 22px;
        height: 22px;
      }
    }
  }
  .userDetail {
    padding: 24px;
    @include align-items(center);
    .profile {
      width: 380px;
      margin: 80px 0 32px 0;
      padding-bottom: 32px;
      border-bottom: 1px solid #e8e8e8;
      @include justify-content(space-between);
      @include align-items(flex-start);
      span {
        font-size: 24px;
      }
      .userGender {
        width: 20px;
        height: 20px;
      }
      .userAvatar {
        width: 60px;
        height: 60px;
      }
    }
    .detail {
      width: 380px;
      font-size: 16px;
      padding-bottom: 32px;
      margin-bottom: 32px;
      border-bottom: 1px solid #e8e8e8;
      @include align-items(flex-start);
      div {
        margin: 12px 0;
        .fontGrey {
          display: inline-block;
          width: 60px;
        }
      }
    }
    .sendMessage {
      width: 120px;
      background: #1AAD19;
    }
  }
  .infoContainer {
    width: 230px;
    height: 100%;
    background: #f5f5f5;
    overflow: auto;
    @include user-select(none);
    .fontGrey {
      margin-right: 6px;
    }
    .userProfile {
      @include padding4(36px, 12px, 0, 12px);
      @include align-items(center);
      margin-bottom: 12px;
      .avatar {
        width: 40px;
        height: 40px;
        background: #33ab9f;
        margin-right: 6px;
      }
      .userBasicInfo {
        font-size: 14px;
        padding-right: 20px;
        background-size: 15px 15px;
        background-position: center right;
        background-repeat: no-repeat;
        width: fit-content;
        margin-bottom: 6px;
      }
      .groupMemberInfo span{
        margin-right: 12px;
      }
      .male {
        background-image: image-url('male.png');
      }
    }
    .wxidInfo {
      margin: 8px 0;
      @include padding2(0, 12px);
      @include justify-content(space-between);
      @include align-items(center);
      .copyWxId {
        font-size: 12px;
        color: #1E9FFF;
        cursor: pointer;
      }
    }
    .sourceInfo,.groupManager{
      @include padding2(0, 12px);
      margin-bottom: 16px;
      .fontGrey {
        display: inline-block;
        width: 40px;
        text-align: right;
      }
    }
    .groupManager {
      margin: 8px 0;
    }
    .markTitle,.labelTitle {
      @include padding2(0, 12px);
      @include justify-content(space-between);
      @include align-items(center);
      margin-bottom: 6px;
    }
    .markInput {
      margin: 0 12px;
      resize: none;
      height: 54px;
      outline: none;
      margin-bottom: 10px;
      @include flex-shrink(0);
    }
    .labels {
      @include padding2(0, 12px);
      height: 108px;
      overflow: auto;
      @include flex-shrink(0);
      span {
        margin: 4px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        &:hover {
          .labelDelete {
            opacity: 1;
            // font-size: 12px;
            cursor: pointer;
            transition: opacity 0.3s;
          }
        }
      }
      .labelDelete {
        opacity: 0;
      }
    }
  }
  .editServiceDialog,.editLabelDialog,.inviteGroupDialog, .historyDialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 370px;
    height: 300px;
    background: #fff;
    border: 1px solid #ccc;
    .dialogHead {
      height: 40px;
      font-size: 16px;
      margin-bottom: 8px;
      background: #f5f5f5;
      border-bottom: 1px solid #ccc;
      @include padding2(14px, 16px);
      @include align-items(center);
      @include justify-content(space-between);
    }
    .editForm {
      @include padding2(0, 16px);
      .editFormItem {
        margin: 8px 0;
        .clickedSpan {
          position: relative;
          margin-left: 50px;
          @include padding2(6px, 6px);
          @include align-self(flex-end);
          input {
            cursor: pointer;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
          }
        }
        input[type='radio'] {
          margin-right: 4px;
        }
      }
      .formLabel {
        @include flex-shrink(0);
      }
      .avatarEdit {
        @include align-items(center);
      }
      img {
        width: 38px;
        height: 38px;
        background: #33ab9f;
      }
    }
    .submitInfo {
      width: 72px;
      margin-top: 16px;
      height: 38px;
      @include align-self(center);
      &:hover {
        height: 38px;
        margin-top: 16px;
      }
    }
  }
  .editLabelDialog {
    width: 260px;
    height: 275px;
    .existLabels {
      @include flex-wrap(wrap);
      span {
        margin: 0 8px 8px 0;
      }
    }
  }
  .inviteGroupDialog  {
    height: 340px;
    .matchGroups {
      border: 1px solid #ccc;
      height: 160px;
      overflow-y: auto;
      @include padding2(6px, 6px);
      @include flex-wrap(wrap);
    }
    .singleGroup {
      width: 162px;
      height: 45px;
      overflow-x: hidden;
      img {
        margin: 0 4px;
      }
      .groupInfo {
        min-width: 0;
        @include padding2(4px, 0);
        @include justify-content(space-between);
      }
    }
    .avatarCheckbox {
      @include align-items(center);
    }
    input[type='text'] {
      height: 30px;
      line-height: 30px;
      width: 70%;
      @include padding-left(6px);
    }
    .submitInfo {
      margin-top: 10;
      &:hover {
        margin-top: 10;
      }
    }
  }
  .historyDialog {
    width: 450px;
    height: 600px;
    background: #f3f3f3;
    @include padding-bottom(16px);
    .search {
      margin-bottom: 16px;
      @include flex-shrink(0);
      input {
        width: 100%;
        height: 30px;
        line-height: 30px;
        background: #e3e3e3;
        border:none;
        @include padding-left(30px);
        @include border-radius(6px);
        background-image: image-url('search.png');
        background-size: 18px 18px;
        background-position: 6px center;
        background-repeat: no-repeat;
      }
    }
    .historyAvatar {
      @include align-self(flex-start);
      @include padding-top(16px);
    }
    .historyTabs {
      font-size: 18px;
      height: 36px;
      margin-top: 8px;
      @include justify-content(center);
      @include align-items(center);
      @include flex-shrink(0);
      div {
        cursor: pointer;
        margin: 0 16px;
        border-bottom: 3px solid transparent;
        @include padding-bottom(12px);
        &.active {
          color: #1AAD19;
          border-bottom: 3px solid #1AAD19;
        }
      }
    }
    .historyContent {
      overflow: auto;
      @include flex-grow(1);
      @include padding-top(8px);
    }
    .historyItem {
      @include align-items(center);
    }
    .historyItemInfo {
      padding: 16px 0;
      border-bottom: 0.5px solid #ccc;
      @include align-items(center);
      img {
        @include flex-shrink(0);
        margin-right: 4px;
      }
    }
    .historyItemContent {
      @include padding2(0, 8px);
      @include flex-wrap(wrap);
      div {
        margin-bottom: 8px;
      }
      img,video {
        width: 240px !important;
        height: auto;
      }
    }
    .historyItemDate {
      @include flex-shrink(0);
      @include align-self(flex-start);
      @include padding-top(16px);
    }
  }
}
